import { onMounted } from 'vue';

/**
 * 性能监控 Composable
 * 用于监控页面性能指标
 */
export function usePerformance() {
    const reportPerformance = () => {
        // 检查浏览器是否支持 Performance API
        if (!window.performance || !window.PerformanceObserver) {
            return;
        }

        // 监控 LCP (Largest Contentful Paint)
        try {
            const lcpObserver = new PerformanceObserver((list) => {
                const entries = list.getEntries();
                const lastEntry = entries[entries.length - 1];
                console.log('LCP:', lastEntry.renderTime || lastEntry.loadTime);
            });
            lcpObserver.observe({ entryTypes: ['largest-contentful-paint'] });
        } catch (e) {
            // Safari可能不支持某些API
        }

        // 监控 FID (First Input Delay)
        try {
            const fidObserver = new PerformanceObserver((list) => {
                const entries = list.getEntries();
                entries.forEach((entry) => {
                    console.log('FID:', entry.processingStart - entry.startTime);
                });
            });
            fidObserver.observe({ entryTypes: ['first-input'] });
        } catch (e) {
            // Safari可能不支持某些API
        }

        // 监控 CLS (Cumulative Layout Shift)
        try {
            let clsScore = 0;
            const clsObserver = new PerformanceObserver((list) => {
                const entries = list.getEntries();
                entries.forEach((entry) => {
                    if (!entry.hadRecentInput) {
                        clsScore += entry.value;
                    }
                });
                console.log('CLS:', clsScore);
            });
            clsObserver.observe({ entryTypes: ['layout-shift'] });
        } catch (e) {
            // Safari可能不支持某些API
        }
    };

    const getNavigationTiming = () => {
        if (!window.performance || !window.performance.timing) {
            return null;
        }

        const timing = window.performance.timing;
        return {
            // DNS查询时间
            dns: timing.domainLookupEnd - timing.domainLookupStart,
            // TCP连接时间
            tcp: timing.connectEnd - timing.connectStart,
            // 请求响应时间
            request: timing.responseEnd - timing.requestStart,
            // DOM解析时间
            domParsing: timing.domInteractive - timing.domLoading,
            // 页面加载完成时间
            pageLoad: timing.loadEventEnd - timing.navigationStart,
        };
    };

    onMounted(() => {
        // 仅在开发环境报告性能
        if (import.meta.env.DEV) {
            reportPerformance();
            
            // 页面加载完成后输出导航时间
            window.addEventListener('load', () => {
                setTimeout(() => {
                    const timing = getNavigationTiming();
                    if (timing) {
                        console.table(timing);
                    }
                }, 0);
            });
        }
    });

    return {
        reportPerformance,
        getNavigationTiming
    };
}

